<template>
  <div class="bodys">
    <div class="container">
      <div class="interface">
        <div class="left">
          <div class="login">
            <h2>
              <span id="login">登录</span>
            </h2>
            <div class="login-input">
              <div class="tip"></div>
              <!-- 表单 -->
              <div class="form">
                <el-form ref="loginForm" :model="formData0" label-width="100px">
                  <el-form-item prop="username" label="用户名:">
                    <el-input v-model="formData0.username" autofocus class="inputs" />
                  </el-form-item>
                  <el-form-item prop="password" label="密码:">
                    <label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
                    <el-input v-model="formData0.password" type="password" class="inputs" />
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <input type="submit" value="注册" class="reg-btn btn" name="reg-btn" />
          </div>
        </div>
        <div class="right">
          <div class="register">
            <h2>
              <span id="register">注册</span>
            </h2>
            <div class="reg-item">
              <div class="form">
                <el-form ref="signupForm" :model="formData" :rules="rules" label-width="105px">
                  <el-form-item prop="selectid" label="身份选择:">
                    <el-radio-group v-model="formData.identify" size="small">
                      <el-radio-button label="老师" />
                      <el-radio-button label="学生" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item prop="userName" label="用户名">
                    <label slot="label">用&ensp;户&ensp;名:</label>
                    <el-input v-model="formData.userName" autofocus />
                  </el-form-item>
                  <el-form-item prop="password" label="密码">
                    <label slot="label">密&emsp;&emsp;码:</label>
                    <el-input v-model="formData.password" type="password" />
                  </el-form-item>
                  <el-form-item prop="confirmPassword" label="确认密码:">
                    <el-input v-model="formData.confirmPassword" type="password" />
                  </el-form-item>

                  <el-form-item prop="selectclass" label="班级选择" v-show="role === '2'">
                    <el-select v-model="formData.lesson" placeholder="请选择">
                      <el-option
                        v-for="item in optionClass"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item class="ctrl">
                    <span @click="alreadyhave">登录已有账号</span>
                    <el-button
                      type="primary"
                      class="verify"
                      size="small"
                      @click="submitForm('signupForm')"
                    >确认注册</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <el-button
              type="submit"
              value="登录"
              class="login-btn btn"
              name="login-btn"
              @click="jumpAbout"
            >登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import allApis from "@/request";
const { loginApi, registerApi } = allApis;
export default {
  name: "Login",
  data() {
    //检验密码和确认密码是否一样
    const samePassword = (rules, value, callback) => {
      if (this.formData.password !== value) {
        callback(new Error("确认密码与新密码不一致！"));
      } else {
        callback();
      }
    };

    return {
      formData0: {
        username: "",
        password: "",
        identify: "",
      },
      studentNavList: [
        { name: "examlist", navItem: "考试列表" },
        { name: "myexam", navItem: "我的考试" }
      ],
      teacherNavList: [
        { name: "problemmanagement", navItem: "问题管理" },
        { name: "exammanagement", navItem: "考试管理" },
        { name: "scoremanagement", navItem: "成绩管理" }
      ],
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符"
          },
          {
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "姓名不支持特殊字符"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 18,
            message: "密码长应大于6个字符"
          }
        ]
      },
      formData: {
        userName: "",
        password: "",
        confirmPassword: "",
        lesson: "",
        identify: "",
      },

      // 班级选择
      optionClass: [
        {
          value: "1",
          label: "一班"
        },
        {
          value: "2",
          label: "二班"
        },
        {
          value: "3",
          label: "三班"
        }
      ],

      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符"
          },
          {
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "姓名不支持特殊字符"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "密码长应大于6个字符"
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
            message: "密码应包含字母数字和英文",
            trigger: "blur"
          }
        ],
        confirmPassword: [
          { required: true, message: "请再次输入密码确认", trigger: "blur" },
          {
            validator: samePassword,
            message: "两次密码不一致",
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      user: "user"
    }),
    role() {
      return this.formData.identify === "老师" ? "1" : "2";
    }
  },
  methods: {
    jumpAbout() {
      loginApi({
        username: this.formData0.username,
        password: this.formData0.password,
      }).then(
        (res) => {  
          this.$message.success("登录成功");
          console.log("登录成功", res);
          this.$store.commit("setToken", res.data.data.token);
          this.$store.commit("setUserId",res.data.data.userId)
          this.$store.commit("setexamClass",res.data.data.class1)
          if (res.data.data.role == "2") {
            sessionStorage.setItem(
              "navList",
              JSON.stringify(this.studentNavList)
            );
            this.$router.push({
              name: "examlist",
              params: {
                username: res.data.data.username,
                password: this.formData0.password,
                identify: "",
              },
            });
          } else if (res.data.data.role == "1") {
            sessionStorage.setItem(
              "navList",
              JSON.stringify(this.teacherNavList)
            );
            this.$router.push({
              name: "exammanagement",
              params: {
                username: res.data.data.username,
                password: this.formData0.password,
                identify: "",
              },
            });
          } else {
            this.$message.error("账号或密码错误");
          }
          return res;
        },
        (err) => {
          console.log("登录失败", err);
          this.$message.error("登录失败");
        }
      );
    },

    alreadyhave() {
      var login_btn = document.getElementsByClassName("btn")[1];
      var register_btn = document.getElementsByClassName("btn")[0];
      var left = document.getElementsByClassName("left")[0];
      var login_input = document.getElementsByClassName("login-input");
      var reg_input = document.getElementsByClassName("reg-item");
      var login_div = document.getElementsByClassName("login-div");
      var reg_div = document.getElementsByClassName("reg-div");
      login_btn.style.display = "inline-block";
      left.style.width = "400px";
      for (var j = 0; j < reg_input.length; j++) {
        reg_input[j].style.display = "none";
        reg_input[j].style.width = "0px";
      }
      for (var m = 0; m < login_div.length; m++) {
        reg_div[m].style.display = "none";
      }
      setTimeout(function () {
        for (var n = 0; n < login_div.length; n++) {
          login_div[n].style.display = "inline-block";
        }
        for (var i = 0; i < login_input.length; i++) {
          register_btn.style.display = "none";
          login_input[i].style.display = "inline-block";
          login_input[i].style.width = "380px";
        }
      }, 300);
    },

    // 注册新用户
    submitForm() {
      if (this.formData.identify == "老师") {
        this.formData.identify = "1";
      } else if (this.formData.identify == "学生") {
        this.formData.identify = "2";
      }
      // 调用接口进行传值
      registerApi({
        username: this.formData.userName,
        password: this.formData.password,
        role: this.formData.identify,
        class1: this.formData.lesson,
      }).then(
        (res) => {
          this.$message.success("注册成功");
          console.log("注册成功", res);
          // 注册成功，回到登录页
          if (res) {
            var login_btn = document.getElementsByClassName("btn")[1];
            var register_btn = document.getElementsByClassName("btn")[0];
            var left = document.getElementsByClassName("left")[0];
            var login_input = document.getElementsByClassName("login-input");
            var reg_input = document.getElementsByClassName("reg-item");
            var login_div = document.getElementsByClassName("login-div");
            var reg_div = document.getElementsByClassName("reg-div");
            login_btn.style.display = "inline-block";
            left.style.width = "400px";
            for (var j = 0; j < reg_input.length; j++) {
              reg_input[j].style.display = "none";
              reg_input[j].style.width = "0px";
            }
            for (var m = 0; m < login_div.length; m++) {
              reg_div[m].style.display = "none";
            }
            setTimeout(function () {
              for (var n = 0; n < login_div.length; n++) {
                login_div[n].style.display = "inline-block";
              }
              for (var i = 0; i < login_input.length; i++) {
                register_btn.style.display = "none";
                login_input[i].style.display = "inline-block";
                login_input[i].style.width = "380px";
              }
            }, 300);
          }
          return res;
        },
        (err) => {
          console.log("注册失败", err);
          this.$message.error("注册失败");
        }
      );
    },
  },
  mounted() {
    var register = document.getElementById("register");
    var login = document.getElementById("login");
    var login_btn = document.getElementsByClassName("btn")[1];
    var register_btn = document.getElementsByClassName("btn")[0];
    var left = document.getElementsByClassName("left")[0];
    var login_input = document.getElementsByClassName("login-input");
    var reg_input = document.getElementsByClassName("reg-item");
    var reg_notices = document.getElementsByClassName("reg-notice");
    var login_div = document.getElementsByClassName("login-div");
    var reg_div = document.getElementsByClassName("reg-div");

    window.onload = function() {
      login_btn.style.display = "inline-block";
      left.style.width = "400px";
      for (var j = 0; j < reg_input.length; j++) {
        reg_input[j].style.display = "none";
        reg_input[j].style.width = "0px";
      }
      for (var m = 0; m < login_div.length; m++) {
        reg_div[m].style.display = "none";
      }
      for (var n = 0; n < login_div.length; n++) {
        login_div[n].style.display = "inline-block";
      }
      for (var i = 0; i < login_input.length; i++) {
        register_btn.style.display = "none";
        login_input[i].style.display = "inline-block";
        login_input[i].style.width = "380px";
      }
    };

    register.onclick = function() {
      register_btn.style.display = "inline-block";
      left.style.width = "150px";
      for (var i = 0; i < login_input.length; i++) {
        login_input[i].style.display = "none";
        login_input[i].style.width = "0px";
      }
      for (var m = 0; m < login_div.length; m++) {
        login_div[m].style.display = "none";
      }
      setTimeout(function() {
        for (var n = 0; n < reg_div.length; n++) {
          reg_div[n].style.display = "inline-block";
        }
        for (var j = 0; j < reg_input.length; j++) {
          login_btn.style.display = "none";
          reg_input[j].style.display = "inline-block";
          reg_input[j].style.width = "100%";
        }
      }, 500);
    };

    login.onclick = function() {
      login_btn.style.display = "inline-block";
      left.style.width = "400px";
      for (var j = 0; j < reg_input.length; j++) {
        reg_input[j].style.display = "none";
        reg_input[j].style.width = "0px";
      }
      for (var m = 0; m < login_div.length; m++) {
        reg_div[m].style.display = "none";
      }
      setTimeout(function() {
        for (var n = 0; n < login_div.length; n++) {
          login_div[n].style.display = "inline-block";
        }
        for (var i = 0; i < login_input.length; i++) {
          register_btn.style.display = "none";
          login_input[i].style.display = "inline-block";
          login_input[i].style.width = "360px";
        }
      }, 300);
    };

    register_btn.onclick = function() {
      for (var i = 1; i < reg_input.length; i++) {
        (function() {
          if (reg_input[i].value == "") {
            reg_notices[i - 1].style.display = "inline-block";
          }
        })(i);
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.bodys {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgb(114, 135, 254), rgb(130, 88, 136));
}
h2 span {
  color: #fff;
  border-bottom: 3px solid rgb(255, 230, 4);
  cursor: pointer;
}
h2 span:hover {
  color: rgb(211, 211, 211);
}
a {
  text-decoration: none;
}
.btn {
  transition: linear 0.2s;
  margin-top: 115px;
  width: 70px;
  height: 70px;
  font-size: 18px;
  background: none;
  border: 1px solid rgb(199, 191, 219);
  border-radius: 50%;
  color: rgb(199, 191, 219);
  cursor: pointer;
}
.btn:hover {
  background-color: rgba(255, 230, 1, 0.801);
  color: #fff;
  border: 1px solid #fff;
}

.container {
  width: 100%;
  height: 100vh;
  min-width: 550px;
  /* margin-top: 455px; */
}
.interface {
  width: 550px;
  height: 555px;
  background-color: rgb(95, 76, 194);
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 10px 50px rgb(59, 45, 159);
  border-radius: 15px;
}
.login-input {
  width: 360px;
  position: absolute;
  left: -18px;
  top: 180px;
}
.form {
  ::v-deep .el-form-item {
    padding-left: 8%;
  }
  ::v-deep .el-form-item__label {
    color: #fff;
    font-size: 15px;
  }
  .el-input {
    width: 100%;
  }

  .ctrl {
    margin-top: 8%;

    span {
      margin-right: 12%;
      font-size: 13px;
      color: rgb(213, 213, 213);
      cursor: pointer;

      &:hover {
        color: rgb(254, 254, 254);
        text-decoration: none;
      }
    }
  }
}
.left {
  display: inline-block;
  float: left;
  width: 400px;
  height: 100%;
  background-image: linear-gradient(
    to bottom right,
    rgb(118, 76, 163),
    rgb(92, 103, 211)
  );
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  transition: linear 0.4s;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  .tip {
    grid-row: 2/3;
    font-size: 30px;
    text-align: center;

    .iconfont {
      font-size: 40px;
      color: #409eff;
      margin-right: 3%;
    }
  }
}
.login {
  width: 330px;
  padding: 50px 30px;
}
.login h2 span {
  margin-left: 19px;
  transition: linear 0.2s;
}
/* #login{
      margin-left: 19px;
      transition: linear .2s;
  } */
::-webkit-input-placeholder {
  color: rgb(199, 191, 219);
}

.message-content {
  margin: 15px 0px;
  display: inline-block;
}
.message-content span a {
  font-size: 14px;
  transition: 0.2s;
  color: rgb(199, 191, 219);
  cursor: pointer;
}
.message-content span a:hover {
  color: #fff;
  border-bottom: 1px solid rgb(255, 230, 4);
}
.reg-btn {
  margin-left: 9px;
  display: none;
  transition: linear 0.2s;
}

.right {
  display: inline-block;
  width: 150px;
  height: calc(100% - 75px);
  padding: 50px 0px;
  text-align: center;
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  .tip {
    grid-row: 2/3;
    font-size: 30px;
    text-align: center;

    .iconfont {
      font-size: 40px;
      color: #409eff;
      margin-right: 3%;
    }
  }
  .reg-item {
    width: 330px;
    display: none;
    padding: 30px 30px;
  }
  .reg-input div {
    margin-top: 10px;
    width: 100%;
    height: 58px;
    display: none;
    transition: linear 0.2s;
    background: none;
  }
  .reg-input div input {
    border: 0;
    background: none;
    outline: 0;
    color: #fff;
    border-bottom: 1px solid rgb(199, 191, 219);
    width: 100%;
    padding: 10px 5px;
  }
  .reg-input input:hover {
    border-bottom: 1px solid #fff;
  }
}
.login-btn {
  display: inline-block;
}

.notice {
  display: none;
  width: 100%;
  font-size: 14px;
  margin: 0;
  padding: 0;
  text-align: left;
  color: rgb(255, 55, 55);
  margin-left: 2px;
}
.login-notice {
  display: inline-block !important;
}
</style>
